<template>
  <div v-loading="loading">
    <div class="search-container">
      <div class="stock" style="margin-top: 10px; position: relative;">
        <div id="mat-container" class="warehouse-container flex"
             style="width: 100%; position: relative;overflow-x: auto">
          <div class="warehouse-item"
               :class="isIn ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
               style="height: 100px; padding-bottom: 10px" @click="matClick('in')">
            <p
              style="height: 31px; text-overflow: ellipsis;font-weight: 700;font-size: 16px;overflow: hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">
              入库计划</p>
            <p class="flex" style="justify-content: space-between;align-items: center;">
              <span style="color: rgba(0, 0, 0, 0.35);">未完成(柜)</span>
              <span style="font-weight: 700;font-size: 16px;">{{ planObj.boxNumR }} </span>
            </p>
            <p class="flex" style="justify-content: space-between;align-items: center;">
              <span style="color: rgba(0, 0, 0, 0.35);">重量(吨)</span>
              <span style="font-weight: 700;font-size: 16px;">{{ (planObj.WeightR * 1 / 1000).toFixed(3) }} </span>
            </p>
          </div>
          <div class="warehouse-item"
               :class="!isIn ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
               style="height: 100px; padding-bottom: 10px" @click="matClick('out')">
            <p style="height: 31px; text-overflow: ellipsis;font-weight: 700;font-size: 16px;overflow: hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">出库计划</p>
            <p class="flex" style="justify-content: space-between;align-items: center;">
              <span style="color: rgba(0, 0, 0, 0.35);">未完成(车)</span>
              <span style="font-weight: 700;font-size: 16px;">{{ planObj.runningNumC }} </span>
            </p>
            <p class="flex" style="justify-content: space-between;align-items: center;">
              <span style="color: rgba(0, 0, 0, 0.35);">柜数(柜) | 重量(吨)</span>
              <span style="font-weight: 700;font-size: 16px;">{{planObj.boxNumC }} | {{ (planObj.WeightC * 1 / 1000).toFixed(3) }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="menu-items">
        <p>{{ wareObj.whName }}</p>
        <p>({{ planNum }} {{ isIn ? '柜' : '车'}})</p>
      </div>
    </div>
    <div class="search-frame">
      <Input v-model="listQuery.searchKey" placeholder="请输入商品品名、箱号、车号查询" style="width: 200px;margin-top: 5px;" @on-enter="searchKeyInfo"></Input>
      <div class="margin-left-10" style="display: flex">
        计划状态：
        <Select v-model="searchForm.inPlanOrderStatus" style="width: 120px; margin-top: 5px" multiple transfer clearable @change="statusChange">
          <Option v-for="item in planStatusList" :key="item.lcatValue" :value="item.lcatValue">{{ item.lcatName }}</Option>
        </Select>
      </div>
      <template v-if="isIn">
        <div class="margin-left-10">
          预计到达时间：
          <DatePicker v-model="searchForm.startArrivedDate" type="daterange" transfer></DatePicker>
        </div>
        <div class="margin-left-10">
          入库日期：
          <DatePicker v-model="searchForm.endRegisterDate" type="daterange" transfer></DatePicker>
        </div>
      </template>
      <template v-else>
        <div class="margin-left-10">
          预计提货日期：
          <DatePicker v-model="searchForm.expectedDelivery" type="daterange" transfer></DatePicker>
        </div>
        <div class="margin-left-10">
          出库日期：
          <DatePicker v-model="searchForm.exWarehouse" type="daterange" transfer></DatePicker>
        </div>
      </template>
      <div class="margin-left-10" style="display: flex">
        计划号：
        <Input v-model="searchForm.planOrderNumList" placeholder="请输入完整计划号，多个使用逗号隔开" style="width: 250px; margin-top: 5px" @on-enter="searchKeyInfo"></Input>
      </div>
      <div class="margin-left-10">
        <Button v-if="!isIn" style="width: 60px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px;" type="primary" @click="creteadInfo">新增</Button>
        <Button class="cust-btn" type="primary" @click="searchKeyInfo">查询</Button>
        <Button class="cust-btn" type="primary" @click="reset">重置</Button>
      </div>
    </div>
    <div class="cust-page">
      <Page :total="listQuery.total" :current="listQuery.pageNum" :page-size="listQuery.pageSize"
            @on-change="pageChange" @on-page-size-change="pageSizeChange" show-sizer show-total></Page>
    </div>
    <div class="card-list" style="height: calc(100vh - 386px)">
      <template v-if="list.length">
        <div class="cus-card" v-for="(item, index) in list" :key="index">
          <div style="width: calc(100% - 50px);">
            <template v-if="isIn">
              <div>
                <div v-if = "item.id === null && item.status">
                  <div v-if="item.id === null && columns.filter(a => a.lcatValue == item.status)[0].lcatName === '已创建' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '到货登记'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(69,121,250);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    未开始
                  </div>
                  <div v-if="item.id === null && columns.filter(a => a.lcatValue == item.status)[0].lcatName === '开始作业'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(121,138,255);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    进行中
                  </div>
                  <div v-if="columns.filter(a => a.lcatValue == item.status)[0].lcatName === '作业完成' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '入库完成' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '异常完结' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '作业异常'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,215);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    已完成
                  </div>
                </div>
                <div v-if="item.id !== null && item.status">
                  <div v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '草稿'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(111,199,123);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    {{columnNew.filter(a => a.lcatValue == item.status)[0].lcatName}}
                  </div>
                  <div v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '已提交'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(9,121,80);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    {{columnNew.filter(a => a.lcatValue == item.status)[0].lcatName}}
                  </div>
                  <el-tooltip class="item" effect="dark" :content="'驳回原因：' + item.refuseRemark" placement="top">
                    <div v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '驳回'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(246,143,66);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                      {{columnNew.filter(a => a.lcatValue == item.status)[0].lcatName}}
                    </div>
                  </el-tooltip>
                  <div v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '申请成功'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,218);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    {{columnNew.filter(a => a.lcatValue == item.status)[0].lcatName}}
                  </div>
                </div>
              </div>
              <Row :gutter="5">
                <i-col :span="3" class="head-txt">
                  <span>箱号：</span>
                  {{ item.containerNum }}
                </i-col>
                <i-col :span="4" class="head-txt">
                  <span>预计到达时间：</span>
                  {{ $utils.timestampToDate(item.inEstimateDate) }}
                  <p></p>
                </i-col>
                <i-col :span="3" class="head-txt">
                  <span>送货车号：</span>
                  {{ item.carNo }}
                </i-col>
                <i-col :span="4" class="head-txt">
                  <span>送货司机</span>
                  {{ item.driver }}/{{ item.driverTel }}
                </i-col>
                <i-col :span="3" class="head-txt">
                  <span>入库日期：</span>
                  {{ $utils.timestampToDate(item.startInTime) }}
                </i-col>
                <i-col :span="4" class="head-txt">
                  <span>业务员：</span>
                  {{item.businessPersonal}}/{{item.businessTel}}
                </i-col>
              </Row>
              <hr style="margin: 10px 0">
              <Row :gutter="5" class="font-size-14">
                <i-col :span="6">
                  <span>计划件数(件)：</span>
                  {{ item.sumOrderQty }}
                </i-col>
                <i-col :span="6">
                  <span>计划重量(KGS)：</span>
                  {{ item.sumOrderWeight }}
                </i-col>
                <i-col :span="6">
                  <span>实际件数(件)：</span>
                  {{ item.finishQty }}
                </i-col>
                <i-col :span="6">
                  <span>实际重量(KGS)：</span>
                  {{ item.finishWeight ? item.finishWeight : '' }}
                </i-col>
                <div style="position:absolute;right:0px;margin-right:50px; top: -10px;z-index:1000" v-if="item.id !== null && item.status !== '1' ">
                  <Dropdown placement="bottom-end">
                    <a href="javascript:void(0)" style="color: #4F68E8;">
                      操作
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </a>
                    <DropdownMenu slot="list">
                      <DropdownItem class="font-bold" @click.native.stop="EditInfo(item)">编辑</DropdownItem>
                      <DropdownItem class="font-bold" @click.native.stop="submitInfo(item)">提交</DropdownItem>
                      <DropdownItem class="font-bold" @click.native.stop="delectInfo(item)">删除</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </div>
<!--                <i-col :span="1" style="position:absolute; right: 0; margin-right:54px; z-index:100">-->
<!--                  <el-button class="colorInfo" type="text" @click="getViewInfo(item)">查看附件</el-button>-->
<!--                </i-col>-->
                <i-col :span="1" style="position:absolute; right: 0; margin-right:55px;">
                  <el-button type="text" @click="inPlanInfoD(item,'in')"><span class="colorInfo">{{ !item.dtailInfo ? '展开详情': '收起详情' }}  </span><i class="colorInfo" :class="!item.dtailInfo ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i> </el-button>
                </i-col>
              </Row>
              <Row :gutter="5" class="font-size-14">
                <i-col :span="6">
                  <span>提单号：</span>
                  <span v-if="item.id == null"> {{ item.billOfLandingNo ? item.billOfLandingNo : '--' }}</span>
                  <span v-if="item.id != null"> {{ item.billOfLandingNo ? item.billOfLandingNo : '--' }}</span>
                </i-col>
                <i-col :span="6">
                  <span>作业要求：</span>
                  {{item.intoSeparationChargeSign ? item.intoSeparationChargeSign != 0 ? '分色':'' : '' }}
                  {{item.nucleicAcidTestFlag ? item.nucleicAcidTestFlag != 0 ?'核酸检测' :'' :''}}
                  {{item.disinfectionSign ? item.disinfectionSign != 'N'? "消毒":'' :''}}
                  {{item.authenticateFlag ? item.authenticateFlag != 0 ? "密钥" : '' :''}}
                  {{item.ifCodeReading ? item.ifCodeReading != 0 ? "抄码" : '' : ''}}
                </i-col>
                <i-col :span="6">
                  <span>计划号：</span>
                  {{ item.orderNum }}
                </i-col>
                <i-col :span="6">
                  <span>附件数：</span>
                  <span>{{item.fileCount}}</span>
                </i-col>
              </Row>
              <div v-if="item.dtailInfo && !item.id" style="margin-bottom:15px">
                <p slot="header">进度详情</p> <br>
                <div v-if="item.BusiList" style="padding:10px">
                  <el-steps :active="item.BusiList.length">
                    <el-step :title="computedBusinessName(item.BusiList[0], '计划创建')" :description="computedBusiness(item.BusiList[0])"></el-step>
                    <el-step :title="computedBusinessName(item.BusiList[1], '车辆到达')" :description="computedBusiness(item.BusiList[1])"></el-step>
                    <el-step :title="computedBusinessName(item.BusiList[2], '到货登记')" :description="computedBusiness(item.BusiList[2])"></el-step>
                    <el-step :title="computedBusinessName(item.BusiList[3], '开始作业')"   :description="computedBusiness(item.BusiList[3])"></el-step>
                    <el-step :title="computedBusinessName(item.BusiList[4], '作业完成')" :description="computedBusiness(item.BusiList[4])"></el-step>
<!--                    <el-step :title="computedBusinessName(item.BusiList[5], '离开园区')" :description="computedBusiness(item.BusiList[5])"></el-step>-->
                  </el-steps>
                </div>
                <Row v-if="item.dtailInfo">
                  <Row style="margin-bottom: 10px" v-for="(goods,index) in item.warehousing" :key="index">
                    <el-card style="margin: 10px 0;padding: 0 0 15px;background-color: #F4F8FA">
                      <i-col :span="4">
                        <span>品类：</span>
                        <span>{{ goods.matTypName }}</span>
                      </i-col>
                      <i-col :span="8" v-if=" (menuActiveName == '26' ||menuActiveName == '37') && item.id == null">
                        <span>商品描述：</span>
                        {{ goods.country }} {{ goods.matName }} {{goods.matPack}}
                      </i-col>
                      <i-col :span="8" v-if="(menuActiveName == '26' ||menuActiveName == '37') && item.id != null">
                        <span>商品描述：</span>
                        {{ goods.county }} {{ goods.matName }} {{goods.matPack}}
                      </i-col>
                      <i-col :span="8" v-if="(menuActiveName == '27' ) && item.id == null">
                        <span>商品描述：</span>
                        {{ goods.country }} {{ goods.matName }} {{goods.matPack}}
                      </i-col>
                      <i-col :span="8" v-if="(menuActiveName == '27') && item.id != null">
                        <span>商品描述：</span>
                        {{ goods.county }} {{ goods.matName }} {{goods.packName}}
                      </i-col>
                      <i-col :span="8" v-if="(menuActiveName == '36') && item.id == null">
                        <span>商品描述：</span>
                        {{ goods.countryName ? goods.countryName : goods.country }} {{ goods.matName }} {{goods.matPack}}
                      </i-col>
                      <i-col :span="8" v-if="(menuActiveName == '36') && item.id != null">
                        <span>商品描述：</span>
                        {{ goods.countryName ? goods.countryName : goods.country }} {{ goods.matName }} {{goods.packName}}
                      </i-col>
                      <i-col :span="4">
                        <span>厂号：</span>
                        {{ goods.factoryCode }}
                      </i-col>
                      <i-col :span="4" v-if="item.id == null && (menuActiveName == '26' ||menuActiveName == '37')">
                        <span>包装规格：</span>
                        {{ goods.packageType }}
                      </i-col>
                      <i-col :span="4" v-if="item.id != null && (menuActiveName == '26' ||menuActiveName == '37')">
                        <span>包装规格：</span>
                        {{ goods.packFormatName }}
                      </i-col>
                      <!-- <i-col :span="4" v-if="item.id == null && menuActiveName == '27'">
                          <span>包装规格：</span>
                          {{ goods.packFormat }}
                      </i-col>
                      <i-col :span="4" v-if="item.id != null && menuActiveName == '27'">
                          <span>包装规格：</span>
                          {{ goods.packName }}
                      </i-col> -->
                      <i-col :span="4">
                        <span>生产日期：</span>
                        {{ $utils.timestampToDate(goods.dateGen) }}
                      </i-col>
                      <i-col :span="4">
                        <span>失效日期：</span>
                        {{ goods.dateGen != null ? $utils.timestampToDate(goods.dateExpire) : '' }}
                      </i-col>
                      <!-- <i-col :span="4">
                          <span>商品编码：</span>
                          {{ goods.matCode }}
                      </i-col> -->
                      <i-col :span="4">
                        <span>计划件数(件)：{{ goods.orderQty }} </span>
                      </i-col>
                      <i-col :span="4">
                        <span>计划重量(KGS)：{{ goods.orderWeight ? goods.orderWeight : 0 }} </span>
                      </i-col>
                      <i-col :span="4">
                        <span>实际件数(件)：{{ goods.finishQty ? goods.finishQty : 0}} </span>
                      </i-col>
                      <i-col :span="4">
                        <span>实际重量(KGS)：{{ goods.warehousedWeight ? goods.warehousedWeight : 0}}</span>
                      </i-col>
                      <!-- <i-col :span="4">
                          <span>产品状态：</span>
                              <el-tag size='mini' v-if="goods.productStatus == 1">正品</el-tag>
                              <el-tag size='mini' v-if="goods.productStatus == 2">不良品</el-tag>
                              <el-tag size='mini' v-if="goods.productStatus == 3">退货正品</el-tag>
                              <el-tag size='mini' v-if="goods.productStatus == 4">破箱</el-tag>
                      </i-col> -->
                      <i-col :span="4">
                        <span>破损件数(件)：{{ goods.badBoxNum }}</span>
                      </i-col>
                      <i-col :span="4">
                        <span>抄码件数(件)：{{ goods.codeQty? goods.codeQty : 0 }}</span>
                      </i-col>
                      <i-col :span="4">
                        <span>抄码重量(KGS)：{{ goods.scanSnWeight ? goods.scanSnWeight : 0 }}</span>
                      </i-col>
                      <i-col :span="3" v-if="menuActiveName == 27">
                        <span>批次号：</span>
                        {{ goods.batchNum ? goods.batchNum : '--' }}
                      </i-col>
                    </el-card>
                  </Row>
                </Row>
              </div>
            </template>
            <template v-else>
              <div>
                <div v-if="item.id === null">
                  <div v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '已创建' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '等待出库'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(69,121,250);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    未开始
                  </div>
                  <div v-if ="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '移动下架' ||  columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '部分拣货'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(121,138,255);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    进行中
                  </div>
                  <div v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '出库完成' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '异常完结' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '作业完成' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '作业异常'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,215);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    已完成
                  </div>
                </div>
                <div v-if="item.id !== null">
                  <div v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '草稿'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(111,199,123);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    {{columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName}}
                  </div>
                  <div v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '已提交'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(9,121,80);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                    {{columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName}}
                  </div>
                  <!-- <div v-if = "columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '审批通过'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,215);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                      {{columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName}}
                  </div> -->
                  <el-tooltip class="item" effect="dark" :content="'驳回原因：' + item.reason" placement="top">
                    <div v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '驳回'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(246,143,66);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                      {{columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName}}
                    </div>
                  </el-tooltip>
                </div>
              </div>
              <Row>
                <i-col :span="24" class="head-txt">
                  <span>箱号：</span>
                  {{ item.containerNum }}
                </i-col>
              </Row>
              <Row :gutter="5">
                <i-col :span="3" class="head-txt">
                  <span>提货车号：</span>
                  {{ item.carNo }}
                </i-col>
                <i-col :span="4" class="head-txt">
                  <span>预计提货时间：</span>
                  {{ $utils.timestampToDate(item.outEstimateDate) }}
                </i-col>
                <i-col :span="4" class="head-txt">
                  <span>送货司机：</span>
                  {{ item.driver }}/{{ item.tel }}
                </i-col>
                <i-col :span="3" class="head-txt">
                  <span>出库日期：</span>
                  {{ $utils.timestampToDate(item.outStartDate) }}
                </i-col>
                <i-col :span="4" class="head-txt">
                  <span>业务员：</span>
                  {{item.createdByName}}/{{item.createdByMobile}}
                </i-col>
              </Row>
              <hr style="margin: 10px 0">
              <Row style="margin-bottom: 10px;position: relative;" class="font-size-14">
                <i-col :span="6">
                  <span>计划件数(件)：</span>
                  {{ item.sumOutQty }}
                </i-col>
                <i-col :span="6">
                  <span>计划重量(KGS)：</span>
                  {{ item.sumOutWeight }}
                </i-col>
                <i-col :span="6">
                  <span>实际件数(件)：</span>
                  {{ item.sumFinishQty }}
                </i-col>
                <i-col :span="6">
                  <span>实际重量(KGS)：</span>
                  {{ item.realWorkWeight }}
                </i-col>
                <i-col :span="6">
                  <span>附件数：</span>
                  {{item.fileCount}}
                </i-col>
                <i-col :span="6">
                  <span>作业要求：</span>
                  {{item.escort != 0 && item.escort != null ?'押车':''}}
                  {{item.isScanSn != 0 && item.isScanSn != null ?'抄码':''}}
                  {{item.separation != 0 && item.separation != null ?'分色':''}}
                </i-col>
                <i-col :span="6">
                  <span>计划号：</span>
                  {{ item.outPlanOrderNum }}
                </i-col>
                <div style="position:absolute;right:0px;margin-right:50px; top: -10px;z-index:1000">
                  <Dropdown  v-if="item.id !== null && item.status !== '1' && item.approveStatus != 0">
                    <a href="javascript:void(0)" style="color: #4F68E8;" placement="bottom-end">
                      操作
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </a>
                    <DropdownMenu slot="list">
                      <DropdownItem @click.native="EditInfoCK(item)">编辑</DropdownItem>
                      <DropdownItem @click.native = "submitApplyCK(item)">提交</DropdownItem>
                      <DropdownItem @click.native = "delCcisOutStockApply(item)">删除</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </div>
<!--                <i-col :span="0" style="position:absolute; right: 0; margin-right:54px; margin-top: 20px; top: 20px; z-index: 100;">-->
<!--                  <el-button class="colorInfo" type="text" @click="getViewInfo(item)">查看附件</el-button>-->
<!--                </i-col>-->
                <i-col :span="0" style="position:absolute; right: 0; margin-right:40px; margin-top: 20px; top: -10px">
                  <el-button type="text" @click="viewDetails(item, 'out')"><span class="colorInfo">{{ !item.dtailInfo ? '展开详情': '收起详情' }}</span> <i class="colorInfo" :class="!item.dtailInfo ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i> </el-button>
                </i-col>
              </Row>
            </template>
          </div>
        </div>
      </template>
      <template v-else>
        <empty-comp/>
      </template>
    </div>
  </div>
</template>

<script>
import {getCurrentAgentPermissionWareHouse} from "@/libs/handleWareHouseList";
import {useCustomer} from "@/view/wms/js";
import {
  delCcisOutStockApply,
  getCompleteOrderInfo,
  getExWarehouseList,
  getWarehousingList,
  selectBoxNumPage
} from "@/api/planInfo";
import axios from "axios";
import {inPlanStatus, outPlanStatus, columnNew, columns, columnsTwo} from './js/data'
import EmptyComp from "@/view/wms/comp/EmptyComp.vue";
import {getBusinessprogress} from "@/api/sepPlan";
export default {
  name: "InOutWorkPlan",
  components: {EmptyComp},
  data() {
    return {
      planStatusList: [],
      columnNew,
      columns,
      columnsTwo,
      currentType: 'in',
      statusName: '',
      planNum: 0,
      planObj: {
        boxNumR: 0,
        WeightR: 0,
        runningNumC: 0,
        boxNumC: 0,
        WeightC: 0
      },
      completeOrderInfo: [],
      loading: false,
      wareObj: {},
      wmsUrl: '',
      cancel: '',
      aCancelToken: null,
      list: [],
      searchForm: {
        inPlanOrderStatus: '',
        startArrivedDate: [],
        endRegisterDate: [],
        expectedDelivery: [],
        exWarehouse: [],
        planOrderNumList: ''
      },
      listQuery: {
        filterList: [],
        pageNum: 1,
        pageSize: 10,
        searchKey: '',
        sortList: [],
        total: 0,
        loading: false,
        pageOptionsList: [10, 20, 30, 40],
        searchOrderStatusList: null,
        notInMatTypeCodeList: ['9999', '0001']
      }
    }
  },
  computed: {
    isIn() {
      return this.currentType === 'in';
    }
  },
  methods: {
    computedBusinessName(row, prop){
      if(row){
        if(row.completeProportion){
          return prop + '-' + row.completeProportion;
        }else{
          return prop;
        }
      }else{
        return prop;
      }
    },
    creteadInfo() {},
    inPlanInfoD(item, type){
      let obj = { businessType: type, orderNum: item.orderNum}
      if(type == 'pop'){
        obj.orderNum = item.changeOrderNum
        obj.item = item.item
      }
      getBusinessprogress(obj, this.wmsUrl).then(res =>{
        res.data.returnData.forEach(keys =>{
          if(keys.registerDate){
            keys.date = this.getLocalTime(keys.registerDate).slice(0,-3)
          }
          if(keys.createTime){
            keys.date = this.getLocalTime(keys.createTime).slice(0,-3)
          }
          if(keys.entryTime){
            keys.date = this.getLocalTime(keys.entryTime).slice(0,-3)
          }
          if(keys.lastModifiedTime){
            keys.date = this.getLocalTime(keys.lastModifiedTime).slice(0,-3)
          }
          if(keys.deliveryTime){
            keys.date = this.getLocalTime(keys.deliveryTime).slice(0,-3)
          }
          if(keys.createName){
            keys.createName = keys.createName;
          }
          if(keys.operatorName){
            keys.createName = keys.operatorName
          }
          if(keys.userName){
            keys.createName = keys.userName;
          }
        })
        item.BusiList = res.data.returnData
        item.dtailInfo = !item.dtailInfo;
      })
    },
    delCcisOutStockApply(item) {
      let aCancelToken = new axios.CancelToken((c) => {
          this.cancel = c;
        }
      );
      this.$Modal.confirm({
        title: '提示',
        content: '确认进行删除操作',
        onOk: () => {
          let body = [item.id]
          delCcisOutStockApply(body, this.wmsUrl, aCancelToken).then(({data}) => {
            if (data.returnCode === 200) {
              this.$Message.success('操作成功')
              this.getPlanList();
            } else {
              this.$Message.error(data.returnMsg)
            }
          });
        },
        onCancel: () => {}
      })
    },
    init() {
      getCurrentAgentPermissionWareHouse().then(({data: returnData, message}) => {
        if (returnData) {
          if (!returnData.length) {
            return this.$Message.error('仓库信息为空！');
          }
          this.wareObj = returnData[0];
          this.wmsUrl = this.wareObj.ipProt;
          this.initSearch();
          this.initData();
        } else if (message) {
          this.$Message.error(message);
        }
      })
    },
    initData() {
      this.getInOutDetailInfo();
      this.matClick('in');
    },
    cancelToken() {
      if (!this.aCancelToken) {
        return;
      }
      this.aCancelToken = new axios.CancelToken((c) => {
          this.cancel = c;
        }
      );
    },
    getInOutDetailInfo() {
      getCompleteOrderInfo([this.wareObj.id]).then(res => {
        if (res.data.returnCode === 200) {
          this.completeOrderInfo = res.data.returnData;
          this.planObj.WeightR = 0;
          this.planObj.boxNumR = 0;
          this.planObj.runningNumC = 0;
          this.planObj.boxNumC = 0;
          this.planObj.WeightC = 0;
          this.completeOrderInfo.forEach(item => {
            if (item.inPlan !== null) {
              this.planObj.boxNumR += item.inPlan.boxNum;
              this.planObj.WeightR += item.inPlan.weight * 1;
            }
            if (item.outPlan !== null) {
              this.planObj.runningNumC += item.outPlan.runningNum;
              this.planObj.boxNumC += item.outPlan.boxNum;
              this.planObj.WeightC += item.outPlan.weight * 1;
            }
          });
        }
      })
    },
    searchKeyInfo() {
      this.getPlanList();
    },
    reset() {
      this.searchForm = {
        inPlanOrderStatus: '',
        startArrivedDate: [],
        endRegisterDate: [],
        expectedDelivery: [],
        exWarehouse: [],
        planOrderNumList: ''
      };
      this.listQuery.searchKey = '';
      this.getPlanList();
    },
    statusChange(items) {
      this.planStatusList.some((item) => {
        items.forEach(itemTs => {
          if (item.lcatValue == itemTs) {
            this.statusName = item.status
            return true;
          }
        })
      })
    },
    matClick(type) {
      this.planStatusList = this.isIn ? inPlanStatus : outPlanStatus;
      this.currentType = type;
      this.countPageNum();
      this.getPlanList();
    },
    pageChange(pageNum) {
      this.tableData.pageNum = pageNum;
      this.countPageNum();
    },
    pageSizeChange(pageSize) {
      this.tableData.pageSize = pageSize;
      this.countPageNum();
    },
    countPageNum() {
      let body = {
        applyType: this.currentType,
        ...this.listQuery
      }
      selectBoxNumPage(body, this.wmsUrl, this.aCancelToken).then(({data}) => {
        this.planNum = data.returnCode === 200 ? data.returnData.boxNum : 0;
      })
    },
    async getPlanList() {
      this.list = [];
      this.listQuery.pageNum = 1;
      this.listQuery.searchOrderStatusList = [];
      this.initSearch();
      this.handelSearch();
      this.loading = true;
      let body = {
        ...this.listQuery
      }
      const {data} = this.currentType === 'in' ? await getWarehousingList(body, this.wmsUrl, this.aCancelToken)
        : await getExWarehouseList(body, this.wmsUrl, this.aCancelToken);
      const {returnCode, returnMsg, returnData} = data;
      if (returnCode === 200) {
        const {list, total} = returnData.pageInfo;
        list.forEach(item => item.dtailInfo = null);
        this.list = list;
        this.listQuery.total = total;
      } else {
        this.$Message.error(returnMsg);
      }
      this.loading = false;
    },
    initSearch() {
      const customerCode = useCustomer(this);
      this.listQuery.ownerCodeList = [customerCode];
      this.listQuery.filterList = [
        {
          filterKey: 'cargoOwner',
          filterValue: customerCode
        },
        {
          filterKey: 'ownerCode',
          filterValue: customerCode
        }
      ]
    },
    getLocalTime(n) {
      return new Date(parseInt(n)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    },
    handelSearch() {
      if (this.searchForm.validatePeriod) {
        this.tableData.filterList.push({
          filterKey: 'validatePeriod',
          filterValue: this.searchForm.validatePeriod
        });
      }
      if (this.searchForm.supervisionStatus) {
        this.tableData.filterList.push({
          filterKey: 'supervisionStatus',
          filterValue: this.searchForm.supervisionStatus
        });
      }
      if (this.searchForm.productStatus) {
        this.tableData.filterList.push({
          filterKey: 'productStatus',
          filterValue: this.searchForm.productStatus
        });
      }
      if (this.searchForm.qualityStatus) {
        this.tableData.filterList.push({
          filterKey: 'qualityStatus',
          filterValue: this.searchForm.qualityStatus
        });
      }
      if (this.searchForm.dateInto && this.searchForm.dateInto.length > 0) {
        this.tableData.filterList.push({
          filterKey: 'dateIntoStartDate',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateInto[0])
        });
        this.tableData.filterList.push({
          filterKey: 'dateIntoEndDate',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateInto[1])
        });
      }
      if (this.searchForm.dateGen && this.searchForm.dateGen.length > 0) {
        this.tableData.filterList.push({
          filterKey: 'dateGenStart',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateGen[0])
        });
        this.tableData.filterList.push({
          filterKey: 'dateGenEnd',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateGen[1])
        });
      }
      if (this.searchForm.dateExpire && this.searchForm.dateExpire.length > 0) {
        this.tableData.filterList.push({
          filterKey: 'dateExpireStart',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateExpire[0])
        });
        this.tableData.filterList.push({
          filterKey: 'dateExpireEnd',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateExpire[1])
        });
      }
      if (this.searchForm.dateExpire && this.searchForm.dateExpire.length > 0) {
        this.tableData.filterList.push({
          filterKey: 'dateExpireStart',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateExpire[0])
        });
        this.tableData.filterList.push({
          filterKey: 'dateExpireEnd',
          filterValue: this.$utils.dateToDateStr(this.searchForm.dateExpire[1])
        });
      }
      if (this.searchForm.inPlanOrderStatus && this.searchForm.inPlanOrderStatus != '' && this.planStatus == 1) {
        this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "inPlanOrderStatus")
        if (this.statusName == 'plan') {
          // this.tableData.filterList.push({filterKey: "status", filterValue: this.searchForm.inPlanOrderStatus})
          this.searchForm.inPlanOrderStatus.forEach((item, index) => {
            this.tableData.searchOrderStatusList.push(...item.split(','))
          })
          if (this.tableData.searchOrderStatusList.indexOf('00') == -1 || this.tableData.searchOrderStatusList.indexOf('0') == -1) {
            this.tableData.filterList.push({filterKey: 'searchOrderType', filterValue: 'plan'})
          } else {
            this.tableData.filterList.push({filterKey: 'searchOrderType', filterValue: 'plan,draft'})
          }
          this.tableData.searchOrderStatusList.forEach((item, index) => {
            if (item.length == 2) {
              if (item == '00' || item == '01' || item == '02' || item == '03') {
                this.tableData.searchOrderStatusList[index] = item.slice(1, 2)
              }
              this.tableData.searchOrderStatusList = [...new Set(this.tableData.searchOrderStatusList)]
            } else {
              this.tableData.searchOrderStatusList[index] = item
            }
          })
        } else {
          this.searchForm.inPlanOrderStatus.forEach((item, index) => {
            this.tableData.searchOrderStatusList.push(...item.split(','))
          })
          if (this.tableData.searchOrderStatusList.indexOf('00') == -1 || this.tableData.searchOrderStatusList.indexOf('0') == -1) {
            this.tableData.filterList.push({filterKey: 'searchOrderType', filterValue: 'draft'})
          } else {
            this.tableData.filterList.push({filterKey: 'searchOrderType', filterValue: 'plan,draft'})
          }
          this.tableData.searchOrderStatusList.forEach((item, index) => {
            if (item.length == 2) {
              if (item == '00' || item == '01' || item == '02' || item == '03') {
                this.tableData.searchOrderStatusList[index] = item.slice(1, 2)
              }
              this.tableData.searchOrderStatusList = [...new Set(this.tableData.searchOrderStatusList)]
            } else {
              this.tableData.searchOrderStatusList[index] = item
            }
          })
        }
      }
      if (this.searchForm.inPlanOrderStatus && this.searchForm.inPlanOrderStatus != '' && this.planStatus == 2) {
        this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "inPlanOrderStatus")
        this.searchForm.inPlanOrderStatus.forEach((item, index) => {
          this.tableData.searchOrderStatusList.push(...item.split(','))
        })
      }
      if (this.searchForm.inPlanOrderStatus && this.searchForm.inPlanOrderStatus != '' && this.planStatus == 3) {
        this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "inPlanOrderStatus")
        // this.tableData.filterList.push({filterKey: "finishSign", filterValue: this.searchForm.inPlanOrderStatus})
        this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "inPlanOrderStatus")
        this.searchForm.inPlanOrderStatus.forEach((item, index) => {
          this.tableData.searchOrderStatusList.push(...item.split(','))
        })
      }
      if (this.searchForm.inPlanOrderStatus && this.searchForm.inPlanOrderStatus != '' && this.planStatus == 4) {
        this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "inPlanOrderStatus")
        // this.tableData.filterList.push({filterKey: "status", filterValue: this.searchForm.inPlanOrderStatus})
        this.searchForm.inPlanOrderStatus.forEach((item, index) => {
          this.tableData.searchOrderStatusList.push(...item.split(','))
        })
      }
      if (this.searchForm.startArrivedDate && this.searchForm.startArrivedDate.length > 0 && this.searchForm.startArrivedDate[0] !== '') {
        this.searchForm.startArrivedDate.forEach((item, index) => {
          var str = item.toString();
          str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
          var d = new Date(str);
          var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
          for (var i = 0, len = a.length; i < len; i++) {
            if (a[i] < 10) {
              a[i] = '0' + a[i];
            }
          }
          str = a[0] + '-' + a[1] + '-' + a[2]
          if (index == 0) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "startArrivedTime")
            this.tableData.filterList.push({filterKey: "startArrivedTime", filterValue: str})
          } else if (index == 1) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "endArrivedTime")
            this.tableData.filterList.push({filterKey: "endArrivedTime", filterValue: str})
          }
        })
      }
      if (this.searchForm.endRegisterDate && this.searchForm.endRegisterDate.length > 0 && this.searchForm.endRegisterDate[0] !== '') {
        this.searchForm.endRegisterDate.forEach((item, index) => {
          var str = item.toString();
          str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
          var d = new Date(str);
          var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
          for (var i = 0, len = a.length; i < len; i++) {
            if (a[i] < 10) {
              a[i] = '0' + a[i];
            }
          }
          str = a[0] + '-' + a[1] + '-' + a[2]
          if (index == 0) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "startInTime")
            this.tableData.filterList.push({filterKey: "startInTime", filterValue: str})
          } else if (index == 1) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "endInTime")
            this.tableData.filterList.push({filterKey: "endInTime", filterValue: str})
          }
        })
      }
      if (this.searchForm.expectedDelivery && this.searchForm.expectedDelivery.length > 0 && this.searchForm.expectedDelivery[0] !== '') {
        this.searchForm.expectedDelivery.forEach((item, index) => {
          var str = item.toString();
          str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
          var d = new Date(str);
          var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
          for (var i = 0, len = a.length; i < len; i++) {
            if (a[i] < 10) {
              a[i] = '0' + a[i];
            }
          }
          str = a[0] + '-' + a[1] + '-' + a[2]
          if (index == 0) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "outStartEstimateDate")
            this.tableData.filterList.push({filterKey: "outStartEstimateDate", filterValue: str})
          } else if (index == 1) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "outEndEstimateDate")
            this.tableData.filterList.push({filterKey: "outEndEstimateDate", filterValue: str})
          }
        })
      }
      if (this.searchForm.goodsTransfer && this.searchForm.goodsTransfer.length > 0 && this.searchForm.goodsTransfer[0] !== '') {
        this.searchForm.goodsTransfer.forEach((item, index) => {
          var str = item.toString();
          str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
          var d = new Date(str);
          var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
          for (var i = 0, len = a.length; i < len; i++) {
            if (a[i] < 10) {
              a[i] = '0' + a[i];
            }
          }
          str = a[0] + '-' + a[1] + '-' + a[2]
          if (index == 0) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "startTime")
            this.tableData.filterList.push({filterKey: "startTime", filterValue: str})
          } else if (index == 1) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "endTime")
            this.tableData.filterList.push({filterKey: "endTime", filterValue: str})
          }
        })
      }
      if (this.searchForm.exWarehouse && this.searchForm.exWarehouse.length > 0 && this.searchForm.exWarehouse[0] !== '') {
        this.searchForm.exWarehouse.forEach((item, index) => {
          var str = item.toString();
          str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
          var d = new Date(str);
          var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
          for (var i = 0, len = a.length; i < len; i++) {
            if (a[i] < 10) {
              a[i] = '0' + a[i];
            }
          }
          str = a[0] + '-' + a[1] + '-' + a[2]
          if (index == 0) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "sBusinessDate")
            this.tableData.filterList.push({filterKey: "outStartSDate", filterValue: str})
          } else if (index == 1) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "eBusinessDate")
            this.tableData.filterList.push({filterKey: "outStartEndDate", filterValue: str})
          }
        })
      }
      if (this.searchForm.colorSeparation && this.searchForm.colorSeparation.length > 0 && this.searchForm.colorSeparation[0] !== '') {
        this.searchForm.colorSeparation.forEach((item, index) => {
          var str = item.toString();
          str = str.replace(/ GMT.+$/, '');// Or str = str.substring(0, 24)
          var d = new Date(str);
          var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
          for (var i = 0, len = a.length; i < len; i++) {
            if (a[i] < 10) {
              a[i] = '0' + a[i];
            }
          }
          str = a[0] + '-' + a[1] + '-' + a[2]
          if (index == 0) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "sBusinessDate")
            this.tableData.filterList.push({filterKey: "startBusinessDate", filterValue: str})
          } else if (index == 1) {
            this.tableData.filterList = this.tableData.filterList.filter(item => item.filterKey != "eBusinessDate")
            this.tableData.filterList.push({filterKey: "endBusinessDate", filterValue: str})
          }
        })
      }
      if (this.searchForm.businessType) {
        this.tableData.filterList.push({
          filterKey: 'businessType',
          filterValue: this.searchForm.businessType
        });
      }
    }
  },
  mounted() {
    this.cancelToken();
    this.init();
  }
}
</script>

<style lang="less">
@import "./style/index";

.colorInfo {
  color: #4F68E8;
  // &:hover {
  //     color:#6b6c6f
  // }
}

.font-size-14 {
  font-size: 14px;
}

.head-txt {
  font-weight: bold;
  font-size: 14px;
}

.card-list {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
}
.cust-page {
  background-color: #fff;
  text-align: right;
}

.font-bold {
  font-weight: 700;
}

.font-lolds {
  font-weight: 700;
  z-index: 13;
}

.search-container {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid rgba(217, 217, 217, 1);

  .warehouse, .stock {
    padding: 0 10px;

    .title {
      color: rgba(0, 0, 0, 0.85);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 12px;
    }
  }

  .warehouse {
    padding-top: 10px;
  }

  .stock {
    padding-bottom: 10px;
  }

  .warehouse-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 270px;
    height: 70px;
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 10px 20px;
    color: rgba(0, 0, 0, 0.85);
    margin-right: 10px;
    transition: all .5s;

    &:hover {
      .warehouse-item__checked {
        border: 1px solid rgba(79, 104, 232, 1);
        background-color: rgba(79, 104, 232, 0.1);
      }

      .warehouse-item__not-checked {
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
      }
    }
  }

  .warehouse-item__checked {
    border: 1px solid rgba(79, 104, 232, 1);
    background-color: rgba(79, 104, 232, 0.1);
  }

  .warehouse-item__not-checked {
    border: 1px solid rgba(217, 217, 217, 1);
    background-color: rgba(255, 255, 255, 1);
  }

  .bottom-btn, .bottom-btn2 {
    cursor: pointer;
    width: 50px;
    height: 0;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -20px;
    border-top: 20px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    text-align: center;
    z-index: 100;
    transition: all .3s;
    font-size: 20px !important;

    &:hover {
      transform: scale(1.2) translateY(1px);
    }

    &:hover + .bottom-btn2 {
      transform: scale(1.2) translateY(2px);
    }

    .ios-menu {
      position: absolute;
      top: -20px;
      right: 4px;
      transition: all .3s;
    }
  }

  .bottom-btn2 {
    width: 52px;
    bottom: -21px;
    border-top: 21px solid rgba(217, 217, 217, 1);
    z-index: 90;
  }
}

.content-container {
  margin-top: 10px;

  .ivu-menu-horizontal.ivu-menu-light:after {
    background: rgba(255, 255, 255, 0);
  }

  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
    border-bottom: 4px solid rgba(79, 104, 232, 1) !important;
  }

  .nav-tab {
    background-color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30px;
  }

  .operation {
    padding: 20px 50px 10px;
  }

  .content {
    padding: 30px;
  }

  .activeClass {
    border: 1px solid rgba(79, 104, 232, 1);
    background-color: rgba(79, 104, 232, 0.1);
  }

  .item {
    width: 20px
  }
}
</style>
